<!DOCTYPE html>
<html>
    <head>
        <title>PhotoGallery login page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="shortcut icon" href="styles/images/favicon.ico">
        <link rel="stylesheet" type="text/css" href="styles/login_test.css">
        <link rel="stylesheet" type="text/css" href="styles/header-footer.css">
        <!--[if lt IE 9]>
            <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
        <![endif]-->
        <script src="js/dom.js" type="text/javascript"></script>
        <script src="js/ajax.js" type="text/javascript"></script>
        <script src="js/framework.js" type="text/javascript"></script>

        <script type="text/javascript" src="js/validation.js"></script>
        <script type="text/javascript" src="js/login.js"></script>
        <script type="text/javascript" src="js/logout.js"></script> 
    </head>
    <body>
        <div class="hidden">
            <noscript>You must set your browser to enable Javascript in order to access certain functions of this site.</noscript>
        </div>
        <!-- Main Wrapper -->
        <div class="mainWrapper">
            
            <div data-template="header" class="loader"></div>
            
            <div class="content" data-rndbackground="DSC_0043.jpg">

                <div id="formWrapper"> <!-- Begining of Registration Form (Wrapper) -->
                    <a href="index.html" title="Close"><img src="styles/images/close.png" class="closeRegistrationForm"></a>

                    <h2 id="title">Log in</h2>

                    <form id="loginForm" name="registrationForm" method="POST" action="index.html" onsubmit="return checkForm()">

                        <div class="inputArea">
                            <label for="userName">
                                <span class="textBeforeInput">Email:</span>
                            </label>
                            <span>
                                <input type="text" id="userName" name="userEmail" class="registrationInputs" data-validation="email">
                            </span>
                            <span id="emailError" class="errorMessage hidden"></span>
                        </div>

                        <div class="inputArea">
                            <label for="userPassword">
                                <span class="textBeforeInput">Password:</span>
                            </label>
                            <span>
                                <input type="password" id="userPassword" name="userPassword" class="registrationInputs" data-validation="password">
                            </span>
                            <span id="passError" class="errorMessage hidden"></span>
                        </div>

                        <input type="submit" value="Go!" class="defaultButton">

                        <div class="registerUser">
                            New to PhotoGallery? <a href="registration_test.html">Sign up!</a> 
                        </div>
                    </form>
                </div> <!-- End of Registration Form (Wrapper)-->

            </div> <!-- End of Content -->
            
            <div data-template="footer" class="loader"></div>
            
        </div>
    </body>
</html>